<template>
  <div class="pannel-container flex-column">
    <div class="pannel-title flex-between">
      <span class="t-name">视频监控</span>
      <div class="flex-box detail">
        <span>详情</span>
        <img src="../../assets/imgs/detail_icon.png" alt="">
      </div>
    </div>
    <div class="video_box">

      <el-carousel class="carousel" :interval="5000" arrow="always">
        <el-carousel-item v-for="(item,i) in playerList" :key="i">
          <div class="video " :class="video&&video.videoUrl?'':'flex-column-center'" v-for="(video,vi) in item">
            <video :id="`video${i}${vi}`"  :src="video.videoUrl" v-show="video&&video.videoUrl"></video>
            <div v-show="!video || !video.videoUrl" class="no-video-data flex-column-center">
              <img src="../../assets/imgs/no_data.png" alt="">
              <span>视频暂无数据</span>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>


    </div>
  </div>
</template>
<script>

  import flvjs from 'flv.js'


  export default {
    components:{
    },
    name:'monitor',
    props:{
      videoList:{
        type:Array,
        default:()=>[]
      }
    },
    data(){
      return{
        playerList:[]
      }
    },
    methods:{
      initFlv(url,player,id){
        console.log(url)
        // this.destoryFlv()
        if (flvjs.isSupported()) {
          var videoElement = document.getElementById(id);
          player = flvjs.createPlayer({
            type: 'flv',
            isLive: false,
            hasAudio: false,
            url		// 自己的flv视频流
          });
          player.attachMediaElement(videoElement);
          console.log(player)
          player.load();
          player.play();
        }
      },
      initData(){
        this.videoList.forEach(o=>{
          const diff = 6-o.length;
          if(diff > 0){
            for(let i =0;i<diff;i++){
              o.push('')
            }
          }

        })
        this.playerList = [];
        this.videoList.forEach(o=>{
          let arr = []
          if(o.length){
            arr = o.map(j=>{
              return {
                player:null,
                videoUrl:j
              }
            })
          }
          this.playerList.push(arr)
        })
        this.$nextTick(()=>{
          this.playerList.forEach((p,pi)=>{
            if(p.length){
              p.forEach((j,ji)=>{
                if(j.videoUrl){
                  this.initFlv(j.videoUrl,j.player,`video${pi}${ji}`)
                }
              })
            }
          })
        })

      }
    },
    mounted () {
    }
  }
</script>
<style scoped lang="scss">
  .pannel-container{
    width: 100%;
    background: url("../../assets/imgs/water_bg.png");
    padding: 23px;

    .pannel-title{
      background: url("../../assets/imgs/monitor_title.png")no-repeat;
    }

    .video_box{

      flex: 1;
      min-height: 0;

      .carousel{
        height:100%;
        ::v-deep .el-carousel__item{
          /*display: grid;*/
          /*gap: 9px;*/
          /*grid-template-columns: repeat(3,1fr);*/
          display: flex;
          flex-wrap: wrap;
          padding: 24px 0px 18px 10px;
        }
        ::v-deep .el-carousel__container{
          height: 100%;
        }
        .video{
          background: url("../../assets/imgs/video_bg.png")no-repeat;
          background-size: 100% 100%;
          justify-content: center;
          align-items: center;
          width: 31%;
          height: 49%;
          margin: 5px;
          video{
            width: 100%;
          }
          .no-video-data{
            color: #8EBBFE;
            span{
              margin-top: 15px;
              font-size: 14px;
            }

          }
        }
      }

    }
  }
</style>
